{% extends "pages/base.html" %}
{% block extrahead %}
<style>
.a {
  min-width: 40px;
  text-align: center;
  display: inline-block;
}
.b {
  border-bottom: 1px solid #ddd;
  min-height: 24px;
}
.c301 {
  background-color: #5EC7FF;
}
.c302 {
  background-color: #08A8FF;
}
.c403 {
  background-color: #FC9551;
}
.c404 {
  background-color: #FF6600;
}
.c500 {
  background-color: #CFFA32;
}
.c503 {
  background-color: #CFFA32;
}
</style>
{% endblock %}

{% block content %}

<div class="row">
  <div class="large-12 columns" id="lines">
  </div>
</div>

<div class="row" style="margin-top: 20px;">
  <div class="large-12 columns">
    <p><input id="from" placeholder="from"><input id="to" placeholder="to"></p>
    <p>
      <button id="load">LOAD</button>
      <button id="stop">STOP</button>
      <button id="clear">CLEAR</button>
    </p>
  </div>
</div>

{% endblock %}

{% block last_body %}
<script>
var from = 0;
var to = 10;
var delta = 10;
var stop = false;

function load(from, to) {
  $.ajax({
    type:"GET",
    url:"/link/dead/"+from+"/"+to,
    dataType: "json"
  }).done(function(data) {
    display(data);
    if(!stop) {
      load(from+delta, to+delta);
    }
  }).fail(function(data){
    console.log(data);
  });
}

function display(links) {
  for (var i = 0; i < links.length; i++) {
    var link = links[i];
    $('#lines').append('<div class="b"><div class="a c'+link.code+'">'+link.code+'</div><div class="a"><a href="'+link.url+'">'+link.title+'</a></div><div class="a right"><a href="/a/link/link/'+link.id+'">'+link.flagged+'</a></div></div>')
  }
}

$('#load').on('click', function(){
  load(parseInt($('#from').val(), 10), parseInt($('#to').val(), 10));
});

$('#stop').on('click', function(){
  if(stop) {
    stop = false;
    $('#stop').html('STOP');
  } else {
    stop = true;
    $('#stop').html('RESET');
  }
});

$('#clear').on('click', function(){
  $('#lines').html('');
});


load(from, to);

</script>
{% endblock %}
